<!--
 * @Description: 段级安全生产首页
 * @Author: Huang Junjie
 * @Date: 2021-06-01 11:25:11
 * @LastEditTime: 2021-10-14 10:48:49
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/production-safety/segment-level-home/segment-level-bg-temporary.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/segment-level-home" />
    <!-- 顶部导航栏 -->

    <!-- 页面内容 -->
    <div class="content">
      <div class="inner-content-left">
        <!-- 数据卡片组件 -->
        <data-card class="data-card-style" />
        <!-- 数据卡片组件 -->

        <!-- 风险预警组件 -->
        <risk-early-warning class="risk-early-warning-style" @openDialog="openDialog" />
        <!-- 风险预警组件 -->

        <!-- 安全生产信息组件 -->
        <safety-production-information class="safety-production-information-style" />
        <!-- 安全生产信息组件 -->
      </div>
      <div class="inner-content-middle">
        <div class="title-div">
          <div class="title">无责任铁路交通事故（天）</div>
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/num-bg.png')">
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/num-bg.png')">
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/num-bg.png')">
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/num-bg.png')">
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/num-bg.png')">
          <div class="num">{{ dealDayNum(homeDayNum) }}</div>
        </div>

        <!-- 天窗情况 -->
        <sky-light-situation class="sky-light-situation-style" @openMaintenanceDetail="maintenanceDetail" />
        <!-- 天窗情况 -->
      </div>
      <div class="inner-content-right">
        <div class="inner-content-right-inner-div">
          <!-- 应用卡片列表组件 -->
          <app-card-list class="app-card-list-style" />
          <!-- 应用卡片列表组件 -->

          <!-- 维修进度组件 -->
          <maintenance-progress class="maintenance-progress-style" />
          <!-- 维修进度组件 -->
        </div>

        <!-- 缺陷数量组件 -->
        <number-of-defects class="number-of-defects-style" />
        <!-- 缺陷数量组件 -->
      </div>
    </div>

    <!-- 查看弹框组件 -->
    <view-dialog :dialog="dialog" />
    <!-- 查看弹框组件 -->

    <!-- 天窗情况组件 -->
    <transition name="gis-fade">
      <div v-if="nLink" class="nlink-container">
        <div class="nlink-shadow" @click="maintenanceDetail" />
        <div class="nlink">
          <button type="button" aria-label="Close" class="el-dialog__headerbtn gis-close-button">
            <i class="el-icon-close" @click="maintenanceDetail" />
          </button>
          <DataReview top="0px" :skylight-complete-flag="nLinkFlag" :plan-id="nLinkPlanId" :range-params="nLinkRangeParams" />
        </div>
      </div>
    </transition>
    <!-- 天窗情况组件 -->
  </div>
</template>

<script>
import { getWzrTrafficAccidentData } from '@/api/jjxt/production-safety/segment-level-home';
import '@/styles/jjxt/index.css';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import DataCard from './components/DataCard';
import RiskEarlyWarning from './components/RiskEarlyWarning';
import SafetyProductionInformation from './components/SafetyProductionInformation';
import SkyLightSituation from './components/SkyLightSituation';
import AppCardList from '../components/AppCardList';
import MaintenanceProgress from './components/MaintenanceProgress';
import NumberOfDefects from './components/NumberOfDefects';
import ViewDialog from './components/ViewDialog';
// import DataReview from 'pspc/src/views/pspc/construction/DataReview'

export default {
  name: 'SegmentLevelHome',
  components: {
    TopNavigationBar,
    DataCard,
    RiskEarlyWarning,
    SafetyProductionInformation,
    SkyLightSituation,
    AppCardList,
    MaintenanceProgress,
    NumberOfDefects,
    ViewDialog
    // DataReview
  },
  data() {
    return {
      // 首页无责任铁路交通事故（天）
      homeDayNum: 0,

      // 查看弹窗
      dialog: {
        title: '',
        visible: false,
        list: [],
        index: 0
      },

      nLink: false,
      nLinkFlag: -1,
      nLinkPlanId: '',
      nLinkRangeParams: {}
    };
  },
  mounted() {
    this.getWzrTrafficAccidentData(); // 查询无责任铁路交通事故（天）
  },
  methods: {
    // 处理天数统计数
    dealDayNum(num) {
      if (num < 10) {
        return '0000' + num;
      } else if (num < 100) {
        return '000' + num;
      } else if (num < 1000) {
        return '00' + num;
      } else if (num < 10000) {
        return '0' + num;
      } else {
        return num;
      }
    },

    // 查询无责任铁路交通事故（天）
    getWzrTrafficAccidentData() {
      getWzrTrafficAccidentData().then(res => {
        this.homeDayNum = res.data ? res.data : 0;
      });
    },

    // 打开查看弹窗
    openDialog(data) {
      this.dialog = data;
    },

    // 打开天窗情况弹框
    maintenanceDetail(item) {
      console.log(this.nLink);
      if (this.nLink) this.nLink = false;
      else {
        this.nLink = true;
        this.nLinkFlag = item.completeFlag;
        this.nLinkPlanId = item.dayPlanId;
        this.nLinkRangeParams = {
          mCode: item.lineCode,
          dayPlanId: item.dayPlanId
        };
        // console.log('this.nLinkRangeParams', this.nLinkRangeParams)
        // console.log('item', item)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#background {
  background-color: #071742;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  .inner-content-left {
    position: absolute;
    top: 88px;
    left: 20px;
    bottom: 20px;
    .data-card-style {

    }
    .risk-early-warning-style {
      position: absolute;
      top: 190px;
      bottom: 382px;
    }
    .safety-production-information-style {
      position: absolute;
      bottom: 0;
    }
  }
  .inner-content-middle {
    position: absolute;
    top: 88px;
    left: 494px;
    right: 499px;
    bottom: 20px;
    .title-div {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
        color: #ffffff;
        font-size: 30px;
      }
      .img {
        width: 57px;
        height: 76px;
        margin: 0 9px 0 9px;
      }
      .num {
        position: absolute;
        top: 14px;
        left: 477.5px;
        color: white;
        font-size: 60px;
        font-weight: bold;
        letter-spacing: 41.5px;
      }
    }
    .sky-light-situation-style {
      position: absolute;
      bottom: 0;
    }
  }
  .inner-content-right {
    position: absolute;
    top: 88px;
    left: 1442px;
    bottom: 20px;
    &-inner-div {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 320px;
      .app-card-list-style {
        height: 40%;
      }
      .maintenance-progress-style {
        height: calc(60% - 20px);
        margin-top: 20px;
      }
    }
    .number-of-defects-style {
      position: absolute;
      bottom: 0;
    }
  }
}
.nlink {
  width: 96%;
  height: 92%;
  position: absolute;
  background-color: #081934;
  top: 4%;
  left: 2%;
  border: 2px solid #022954;
  border-radius: 2px;
  z-index: 1;
}
.nlink-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
}
.nlink-container {
  position: absolute;
  width: 100%;
  height: calc(100% - 68px);
}
.gis-fade-enter,
.gis-fade-leave-to {
  opacity: 0;
}
.gis-fade-enter-active,
.gis-fade-leave-active {
  transition: opacity 0.5s;
}
.gis-close-button {
  z-index: 1;
  top: 1px;
  right: 3px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  border: 2px solid white;
  border-radius: 5px;
}
.gis-close-button i {
  color: white;
}
</style>
